<template>
	<view>
		<view class="container">
			<headerView :title='title' :backBtn="true"></headerView>

			<view class="content">
				<view class="order-user-info" @click="chooseAddress">
					<image class="address-icon" src="http://139.159.229.212:8889/index/fujiajia/coordinates_fill.png">
					</image>
					<view class="user-info">
						<view class="user">
							<text class="name">{{ form.name }}</text>
							<text>{{ form.phone }}</text>
						</view>
						<view class="address">
							收货地址：<text>{{ form.region.join(' ') }} {{ form.detail }}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="order-info-one">
				<view class="tab-content-item">
					<view class="tab-center">
						<view class="shop-info">
							<image class="shop-info-image" :src="goodsInfo.thumb" mode=""></image>
							<view class="shop-info-content">
								<view class="info-content-title">
									<view class="">
										{{ quantity }}
									</view>
									<view class="">
										￥{{ goodsInfo.money }}
									</view>
								</view>
								<view class="info-content">
									<view class="">
										{{ goodsInfo.name }}
									</view>
									<view class="">
										X{{ quantity }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="buy-count">
						<view class="count-title">
							购买数量
						</view>
						<view class="edit-count">
							<view class="minus" @click="decreaseQuantity">
								-
							</view>
							<view class="quantity">{{ quantity }}</view>
							<view class="plus" @click="increaseQuantity">
								+
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="order-info-two">
				<view class="order-info-content">
					<view class="item">
						<view class="">
							商品总价：
						</view>
						<view class="">￥{{ totalPrice }}</view>
					</view>
					<view class="item">
						<view class="">
							运费：
						</view>
						<view class="">￥{{ shippingFee }}</view>
					</view>
					<view class="item">
						<view class="">
							手续费：
						</view>
						<view class="">￥{{ handlingFee }}</view>
					</view>
				</view>
				<view class="all-count">
					<view class="">共{{ quantity }}件商品 合计：</view>
					<view class="price">
						￥{{ totalAmount }}
					</view>
				</view>
			</view>

			<view class="login-form-btn" @click="submitOrder">
				确认订单，去支付
			</view>

			<!-- 底部 tabbar -->
			<tabBar :selectIndex="selectIndex"></tabBar>
		</view>
	</view>
</template>

<script>
	import headerView from "../components/header/header.vue";
	import tabBar from "../components/tabBar/index.vue";
	import banlance from "@/api/banlance";

	export default {
		components: {
			tabBar,
			headerView
		},
		data() {
			return {
				title: "确认订单",
				selectIndex: 1,
				quantity: 1, // 商品数量
				shippingFee: 10, // 运费
				handlingFee: 5, // 手续费
				goodsInfo: {},
				form: {
					name: "大傻春",
					phone: "18888888888",
					region: ['福建省', '厦门市', '湖里区'],
					detail: "安兜社181号"
				},
				id: 1, // 商品 ID
			};
		},
		computed: {
			totalPrice() {
				return this.quantity * (this.goodsInfo.money || 0);
			},
			totalAmount() {
				return this.totalPrice + this.shippingFee + this.handlingFee;
			}
		},
		async onLoad(options) {
			this.id = options.id || 1;
			await this.findGoodsInfo();
		},

		// 监听页面返回的地址信息
		onShow() {
			const selectedAddress = uni.getStorageSync('selectedAddress'); // 读取存储的地址
			if (selectedAddress) {
				this.form.name = selectedAddress.name;
				this.form.phone = selectedAddress.tel; // 你的地址列表 `phone` 字段是 `tel`
				this.form.region = [selectedAddress.province, selectedAddress.city, selectedAddress.district];
				this.form.detail = selectedAddress.detail;
			}
		},

		methods: {
			chooseAddress() {
				// 添加type参数表示是选择地址模式
				uni.navigateTo({
					url: "/pages/my/shop/address?type=select" // 增加type参数
				});
			},


			increaseQuantity() {
				this.quantity++;
			},
			decreaseQuantity() {
				if (this.quantity > 1) {
					this.quantity--;
				}
			},
			async findGoodsInfo() {
				await banlance.getProductDetail({
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.goodsInfo = res.data;
						// this.form.name = res.data.user_name || "";
						// this.form.phone = res.data.user_phone || "";
						// this.form.region = res.data.region || [];
						// this.form.detail = res.data.detail || "";
					}
				});
			},
			submitOrder() {
				// 订单提交逻辑
				console.log("提交订单", this.goodsInfo, this.quantity);
			}
		}
	};
</script>

<style lang="less" scoped>
	/* 用户信息部分样式 */
	.order-user-info {
		width: 100%;
		background-color: #fff;
		height: 180rpx;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);

		.address-icon {
			width: 55rpx;
			height: 55rpx;
		}

		.user-info {
			color: #6f6f6f;
			width: 90%;
			padding-left: 20rpx;

			.user {
				padding-bottom: 4rpx;

				.name {
					margin-right: 40rpx;
					font-weight: bold;
				}
			}

			.address {
				font-size: 24rpx;
			}
		}
	}

	/* 订单信息部分样式 */
	.order-info-one {
		width: 100%;
		background: #fff;
	}

	.tab-content-item {
		width: 95%;
		height: auto;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin: auto;
		margin-top: 20rpx;

		.tab-center {
			width: 100%;
			margin: auto;

			.shop-info {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;

				.shop-info-image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 10rpx;
				}

				.shop-info-content {
					width: 77%;

					.info-content-title,
					.info-content {
						display: flex;
						width: 100%;
						justify-content: space-between;
					}

					.info-content {
						color: #bfbfbf;
						font-size: 24rpx;
						padding-top: 10rpx;
					}
				}
			}

			.pay-money {
				text-align: right;
				font-weight: bold;
				color: #f76e00;
			}
		}

		.buy-count {
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.count-title {
				font-size: 36rpx;
			}

			.edit-count {
				display: flex;

				.minus,
				.plus {
					width: 70rpx;
					height: 70rpx;
					border: 2rpx solid #bfbfbf;
					text-align: center;
					cursor: pointer;
					font-size: 32rpx;
					transition: background-color 0.3s ease;
					display: flex;
					justify-content: center;
					align-items: center;

					&:hover {
						background-color: #f5f5f5;
					}
				}

				.quantity {
					width: 70rpx;
					height: 70rpx;
					text-align: center;
					line-height: 70rpx;
					font-size: 32rpx;
				}
			}
		}


	}

	.order-info-two {
		width: 100%;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx 30rpx;

		.order-info-content {
			padding-bottom: 40rpx;
			border-bottom: 2rpx solid #eaeaea;

			.item {
				padding: 10rpx 0;
				display: flex;
				justify-content: space-between;
				color: #6f6f6f;
			}
		}

		.all-count {
			display: flex;
			justify-content: flex-end;
			padding: 30rpx 0 15rpx 0;
			align-items: center;
			color: #6f6f6f;

			.price {
				color: #f76e00;
				font-size: 36rpx;
			}
		}
	}

	.login-form-btn {
		width: 50%;
		background: linear-gradient(90deg, rgba(254, 176, 122, 1) 35%, rgba(242, 171, 235, 1) 100%);
		justify-content: center;
		color: #fff;
		border-radius: 20rpx;
		height: 96rpx;
		display: flex;
		align-items: center;
		margin: auto;
		margin-top: 40rpx;
	}
</style>